﻿@using RazorEngine.Templating
@using codeGen.Model;
@using System.Globalization;
@* @inherits TemplateBase<ClassMetadata>; *@
@{

    TextInfo textInfo = new CultureInfo("en-US", false).TextInfo;
    string className = char.ToLower(Model.ClassName[0]) + Model.ClassName.Substring(1);
    string interfaceName = "I" + Model.ClassName + "Service";
    string interfaceVerb = "_" + className + "Service";
    string tempinterfaceVerb = className + "Service";
    string GetCharStr(string source) { 
        return char.ToLower(source[0]) + source.Substring(1);
    }
}
@{
@: <template>
@:   <el-container>
@:     <!-- 头 -->
@:     <el-header>
@:       <div class="content">
@:         <VxeButton icon="vxe-icon-add" status="primary">新增</VxeButton>
@:         <VxeButton icon="vxe-icon-edit" status="success">编辑</VxeButton>
@:         <VxeButton icon="vxe-icon-delete" status="error">删除</VxeButton>
@:       </div>
@:     </el-header>
@:     <!-- 身体 -->
@:     <el-main>
@:       <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
@:     </el-main>
@:     <!-- 底部 -->
@:     <el-footer>
@:       <vxe-pager
@:         v-model:currentPage="pageVO.currentPage"
@:         v-model:pageSize="pageVO.pageSize"
@:         :total="pageVO.total"
@:         :layouts="[
@:           'Home',
@:           'PrevJump',
@:           'PrevPage',
@:           'Number',
@:           'NextPage',
@:           'NextJump',
@:           'End',
@:           'Sizes',
@:           'FullJump',
@:           'Total',
@:         ]"
@:         @@page-change="pageChange"
@:       >
@:       </vxe-pager>
@:     </el-footer>
@:   </el-container>
@: </template>
@: <script setup>
@: import { ref, reactive } from "vue";
@: 
@: const gridOptions = reactive({
@:   columns: [
        @:{ type: "seq", width: 70 },
        @:{ type: "seq", width: 70 },
        @foreach (var prop in Model.Fields)
        {
        @:{ field: "@(GetCharStr(prop.FieldName))", title: "@prop.FieldComment" },
        }
@:   ],
@:   data: [
@:     {
@:       id: 10001,
@:       name: "Test1",
@:       role: "Develop",
@:       sex: "Man",
@:       age: 28,
@:       address: "test abc",
@:     },
@:     {
@:       id: 10002,
@:       name: "Test2",
@:       role: "Test",
@:       sex: "Women",
@:       age: 22,
@:       address: "Guangzhou",
@:     },
@:     {
@:       id: 10003,
@:       name: "Test3",
@:       role: "PM",
@:       sex: "Man",
@:       age: 32,
@:       address: "Shanghai",
@:     },
@:     {
@:       id: 10004,
@:       name: "Test4",
@:       role: "Designer",
@:       sex: "Women",
@:       age: 24,
@:       address: "Shanghai",
@:     },
@:   ],
@: });
@: 
@: const pageVO = reactive({
@:   total: 0,
@:   currentPage: 1,
@:   pageSize: 10,
@: });
@: 
@: const pageChange = ({ pageSize, currentPage }) => {};
@: </script>
@: <style scoped lang="scss">
@: .content {
@:   display: inline-block;
@:   margin-right: 15px;
@:   line-height: 32px;
@: }
@: </style>

}